<template>
	<view class="container">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color h" 
		style="
		justify-content:space-between;
		padding-top: 20rpx;
		">
			<u-subsection 
			:list="list" 
			@change="sectionChange" 
			:bold="bold"
			:active-color="activeColor"
			:current="current" 
			:mode="mode"
			style="width: 200rpx;"
			height="60"
			font-size="25"
			></u-subsection>
			
			<u-subsection
			:list="list2" 
			@change="sectionChange2" 
			:bold="bold2"
			:active-color="activeColor2"
			:current="current2" 
			:mode="mode2"
			style="width: 400rpx;"
			height="60"
			font-size="25"
			></u-subsection>
		</view>
		<view class="content-header">
			<view class="content-title">{{list2_content}}</view>
			<u-line :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
			
			<view class="content-number content-number-1">{{all_money_str}}：{{all_money}}</view>
			<view class="content-number content-number-2">平均值：{{avg_money}}</view>
			
			<view class="content-chart">
				<qiun-data-charts
				type="line" 
				:opts="opts" 
				:eopts="eopts" 
				:chartData="chartsDataLine1" 
				:echartsApp="true" 
				:echartsH5="true"
				directory="/h5/"
				/>
			</view>
			<view class="content-leaderboard">
				<view class="leaderboard_title">{{leaderboard_title}}</view>
			</view>
			
			<scroll-view scroll-y="true" :style="{height:scroll_view_height+'px'}" @scrolltolower="scrolltolower()">
				<view class="u-flex u-p-l-30 u-p-r-30 u-p-t-10 u-p-b-20" v-for="(item, index) in leaderboard_list" :key="index">
					<view class="u-flex">
						<image slot="icon" class="box-icon" :src="item.icon" mode="" :lazy-load="lazy_load"></image>
					</view>
					<view class="u-flex-1">
						<view class="u-flex-1" style="display: flex;justify-content:center;align-items:center;">
							<view class="box-left">
								{{item.bill_type}}
							</view>
							<view class="u-flex-1 box-right">
								{{item.bill_money}}
							</view>
						</view>
						<view class="u-flex-1">
							<u-line-progress :percent="item.percent" :active-color="lineActiveColor" :inactiveColor="lineInactiveColor"
							striped="true" stripedActive="true" height="25"></u-line-progress>
						</view>
					</view>
					
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";

const list = ref(['支出','收入'])
const current = ref(0)
const bold =  ref(false)
const activeColor =  ref("#2d2d2d")
const mode =  ref("subsection")
const list2 =  ref(['周','月','年'])
const current2 =  ref(0)
const bold2  =  ref(false)
const activeColor2 =  ref("#2d2d2d")
const mode2 =  ref("subsection")
const list2_content =  ref("本周")
const all_money_str =  ref("总支出")
const direction =  ref('row')
const hairLine =  ref(true)
const length =  ref('100%')
const color =  ref("#d8d8d8")
const borderStyle =  ref('solid')
const all_money =  ref("0")
const avg_money =  ref("0")
const leaderboard_title =  ref("支出排行榜")
const leaderboard_list =  ref([])
const phone_height =  ref("0",)
const scroll_view_height =  ref("0",)
const lineActiveColor =  ref("#FDDC2D")
const lineInactiveColor =  ref("#f4f4f4")
const cWidth =  ref('')
const cHeight =  ref('')
const pixelRatio =  ref(1)
const lazy_load =  ref(true)
const chartsDataLine1 =  ref({})
const eopts =  ref({
   legend: {
     left : 'center'
   },
   grid: {
     left : "5%"
   },
   color: ['#FDDC2D', '#f04864', '#8543e0', '#90ed7d'],  xAxis: {
     axisLine: {
       show : true
     }
   },
   yAxis: {
     axisLine: {
       show : false,
     },
     show: false
   },
 })
const opts = ref({
   color: ['#FDDC2D', '#f04864', '#8543e0', '#90ed7d'],  xAxis: {
     type:'grid',  gridColor:'#CCCCCC',  gridType:'dash',  dashLength:8,  disableGrid: true
   },
   yAxis: {
     gridType:'dash',  gridColor:'#CCCCCC',  dashLength:8,  disableGrid: true,  disabled:true
   },
 })

function sectionChange(index){
	current.value = index;
	leaderboard_title.value = list.value[index] + "排行榜";
	all_money_str.value = "总" + list.value[index];
	
	getServerData();
}
function sectionChange2(index){
	current2.value = index;
	
	if(index == 0 || index == 1){
		list2_content.value = "本" + list2.value[index];
	}
	if(index == 2){
		list2_content.value = "今" + list2.value[index];
	}
	getServerData();
}
function getServerData(){
	leaderboard_list.value = [];
	all_money.value = 0;
	avg_money.value = 0;
	
	let name = "";
	let categories = ["03/15", "03/16", "03/17", "03/18", "03/19", "03/20", "03/21"];
	let categories_data = [Math.floor(Math.random() * 50), Math.floor(Math.random() * 100), 90, Math.floor(Math.random() * 200), 50, Math.floor(Math.random() * 100), 88];
	
	
	let LineA={categories:[],series:[]};
	LineA.categories = categories;
	LineA.series = [{name: name, data: categories_data}]
	
	showLineA("canvasLineA",LineA);
}
function showLineA(canvasId,chartData){
	chartsDataLine1.value = chartData;
	return;
}
function scrolltolower(){
	console.log('加载更多');
}
// 计算scroll-view高度
uni.getSystemInfo({
	success(res) {
		phone_height.value = res.windowHeight
		let v = uni.createSelectorQuery().select(".container");
		v.boundingClientRect(data=>{
			scroll_view_height.value = phone_height.value - data.height;
		}).exec();
	}
})

cWidth.value = uni.upx2px(700);
cHeight.value = uni.upx2px(280);
getServerData();
</script>

<style lang="scss" scoped>	
.container{
	background-color: #ffffff;
}
.bg-color{
	background-color: #FDDC2D
}
.content-title{
	width: 150rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 25rpx;
	text-align: center;
	border-bottom: 2px solid #000
}
.content-number{
	width: 90%;
	margin-left: 5%;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 25rpx;
	text-align: left;
	color: #7e8086;
}
.content-number-1{
	margin-top: 20rpx;
}
.content-number-2{
	height: 60rpx;
	line-height: 40rpx;
	border-bottom: 1px solid #d8d8d8;
}
.content-chart{
	width: 100%;
	height: 280rpx;
	border-bottom: 1px solid #d8d8d8
}
.content-leaderboard{
	width: 100%;
}
.leaderboard_title{
	width: 180rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 25rpx;
	text-align: center;
	color: #7e8086;
}
.box-icon{
	width: 50rpx;
	height: 50rpx;
	margin-right: 35rpx;
}
.box-left{
	display: initial;
	width: auto;
	font-weight: 500;
	font-size: 28rpx;
}
.box-right{
	display: initial;
	overflow: hidden;
	text-align: right;
	vertical-align: middle;
	color: #909399;
	font-size: 26rpx;
}
.charts{
	width: 100%;
	height: 280upx;
}
</style>
